/**
* 替代件信息
*/
<template>
    <el-form v-loading="loading" :model="formData" :rules="isEditPage ? formRules : {}" ref="formRef" label-width="80px"
        :scroll-to-error="true">
        <vp-card>
            <el-row style="flex: 1;">
                <vp-col :span="2">
                    <el-form-item prop="jh">
                        <template #label><vp-label zh="件号" en="" align="left" /></template>
                        <el-input v-model="formData.jh" v-trim maxlength="20" v-if="isEditPage" readonly>
                            <template #append>
                                <el-button @click="handleSearchJh">
                                    <SvgIcon name="ele-Search" />
                                </el-button>
                            </template>
                        </el-input>
                        <span v-else>{{ formData.jh }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="tdjjh">
                        <template #label><vp-label zh="替代件号" en="" align="left" /></template>
                        <el-input v-model="formData.tdjjh" maxlength="100" v-if="isEditPage" readonly>
                            <template #append>
                                <el-button @click="handleSearchTdjjh">
                                    <SvgIcon name="ele-Search" />
                                </el-button>
                            </template>
                        </el-input>
                        <span v-else>{{ formData.tdjjh }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>
            <el-row>
                <vp-col :span="2">
                    <el-form-item prop="ywms">
                        <template #label><vp-label zh="英文名称" en="" align="left" /></template>
                        <span>{{ formData.ywms }}</span>
                    </el-form-item>
                </vp-col>
                <vp-col :span="2">
                    <el-form-item prop="bz">
                        <template #label><vp-label zh="中文名称" en="" align="left" /></template>
                        <span>{{ formData.zwms }}</span>
                    </el-form-item>
                </vp-col>
            </el-row>

            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="sxbs">
                        <template #label><vp-label zh="双向绑定" en="" align="left" /></template>
                        <el-radio-group v-model="formData.sxbs" v-if="isEditPage">
                            <el-radio :value="10">是</el-radio>
                            <el-radio :value="20">否</el-radio>
                        </el-radio-group>
                        <vp-text v-else>{{ formData.sxbs === 10 ? '是' : formData.sxbs === 20 ? '否' : '' }}</vp-text>
                    </el-form-item>
                </vp-col>
            </el-row>

            <el-row>
                <vp-col :span="1">
                    <el-form-item prop="tdms">
                        <template #label><vp-label zh="替代描述" en="" /></template>
                        <el-input type="textarea" v-model="formData.tdms" maxlength="1000" :autosize="{ minRows: 2 }"
                            v-if="isEditPage">
                        </el-input>
                        <vp-text v-else>{{ formData.tdms }}</vp-text>
                    </el-form-item>
                </vp-col>
            </el-row>

            <VpFileListRow :attachmentList="formData.attachments" :readOnly="!isEditPage" :show-attachment="false"
                @attachmentListEmit="formData.attachments = $event">
                <template #header><vp-label zh="附件列表" en="File List" /></template>
            </VpFileListRow>
        </vp-card>


        <VpBasedataMaterialDialog ref="vpBasedataMaterialDialog"></VpBasedataMaterialDialog>
    </el-form>
</template>
<script setup lang="ts" name="Ata">
import { defineAsyncComponent, onMounted, ref, watch, computed } from "vue";
import request from "/@/utils/request";

import { ElMessage } from 'element-plus';
import validateUtils from "/@/utils/validateUtils";
import VpFileListRow from '/@/components/vp/file/VpFileListRow.vue';

const emits = defineEmits(['formSubmited']);

import VpBasedataMaterialDialog from '/@/components/vp/basedataMaterial/VpBasedataMaterialDialog.vue'

const formData = ref({
    wlid: "",
    jh: "",
    tdjwlid: "",
    tdjjh: "",
    zwms: "",
    ywms: "",
    sxbs: null,
    tdms: "",
    fjglid: "",
    attachments: [] as any[],
});
const formRules = {
    jh: [validateUtils.notNull],
    tdjjh: [validateUtils.notNull],
    sxbs: [validateUtils.notNull],
}

const initFormData = () => {
    formData.value = {
        wlid: "",
        jh: "",
        tdjwlid: "",
        tdjjh: "",
        zwms: "",
        ywms: "",
        sxbs: null,
        tdms: "",
        fjglid: "",
        attachments: [] as any[],

    }
}

const type = ref('add');
const loading = ref(false);
const formRef = ref();

const props = defineProps<{
    id: string,
    type: string,
}>()

onMounted(() => {
    handleOpen(props.type, props.id);
})

// 是否是编辑页面
const isEditPage = computed(() => {
    return props.type === 'add' || props.type === 'edit';
});

const handleOpen = (_type: string, id: string) => {
    type.value = _type;
    initFormData();
    if (type.value != "add") {
        loading.value = true;
        request.get(`/material/replacement/${id}`).then((res) => {
            formData.value = {
                ...formData.value,
                ...res.data,
            };
            loading.value = false;
            emits("formSubmited", formData.value);
        });
    }
}

const getData = (zt: number): Promise<any> => {
    let promise = new Promise((resolve, reject) => {
        formRef.value.validate((valid: boolean) => {
            if (valid) {
                resolve({
                    ...formData.value,
                });
            } else {
                reject();
            }
        })
    })
    return promise;
};


const vpBasedataMaterialDialog = ref();
const handleSearchJh = () => {
    vpBasedataMaterialDialog.value.handleOpen({
        multi:false,
        callback: (obj: any) => {
            if (obj.id == formData.value.tdjwlid) {
                return ElMessage.warning('件号和替代件号不能一样');;
            }
            formData.value.jh = obj.jh;
            formData.value.wlid = obj.id;
            formData.value.ywms = obj.ywms;
            formData.value.zwms = obj.zwms;
        }
    })
}

const handleSearchTdjjh = () => {
    vpBasedataMaterialDialog.value.handleOpen({
        multi:false,
        callback: (obj: any) => {
            if (obj.id == formData.value.wlid) {
                return ElMessage.warning('件号和替代件号不能一样');;
            }
            formData.value.tdjjh = obj.jh;
            formData.value.tdjwlid = obj.id;
        }
    })
}

defineExpose({
    getData
})

</script>
<style scoped>
:deep(.row-warning1) {
    color: var(--el-color-danger);
}
</style>